<template>
    <s-layout id="layout" :tabbarshow="false" navbar="normal" :title="'合同追溯'" :autoBack="true" leftIconColor="#333" :bgColor="'rgba(0,0,0,0)'" :titleStyle="{ color: '#fff', fontSize: '32rpx' }">

        <view id="app" :style="{ backgroundImage: `url( ${baseUrl}/uploads/uniapp_image/staff_v1/hetongzhuisu_bg1@2.png)`, paddingTop: (safeAreaInsets?.top + 44) + 'px' }">
            <view>

                <!-- 状态栏 -->
                <view class="menu">
                    <up-tabs :list="state.menulist" :scrollable="false" @click="menulistclick"
                        :current="state.currentTab" :lineWidth="16"
                        :activeStyle="{ color: '#303133', fontWeight: 'bold', transform: 'scale(1.05)' }"
                        :inactiveStyle="{ color: '#606266', transform: 'scale(1)' }"></up-tabs>
                </view>

                <!-- 搜索组件 -->
                <view class="area">
                    <s-search-keyword :placeholder="'搜索合作业务'" @searchKeyWord="searchKeyWord"></s-search-keyword>
                </view>
            </view>
            <!-- 列表综合 -->
            <scroll-view scroll-y class="comprehensive" @scrolltolower="PopupScrolltolower" show-scrollbar="true"
                :refresher-enabled="isOpenRefresh" :refresher-triggered="triggered" :refresher-threshold="100"
                refresher-background="white" @refresherpulling="onPulling" @refresherrefresh="onRefresh"
                @refresherrestore="onRestore" @refresherabort="onAbort" @scroll="onScroll">
                <view v-if="contractTraceabilityList.length !== 0">
                    <view v-for="(item, index) in contractTraceabilityList" :key="index">
                        <view class="list_item">
                            <view class="list_item_left area" :class="item.state !== '2' ? 'border' : ''" @tap="skipDetails(item.id)">
                                <view class="icon">
                                    <image :src="`${baseUrl}/uploads/uniapp_image/staff/shenpi_icon9.png`"
                                        mode="scaleToFill" />
                                </view>
                                <view class="message_box item_left">
                                    <!-- 提交人 -->
                                    <view class="submitter item_left_box">
                                        <view
                                            :class="item.state == 0 ? 'yellow' : item.state == 1 ? 'blue' : item.state == 2 ? 'green' : 'status'"
                                            v-if="item.status !== 0">
                                            {{ item.state == 0 ? '待邮寄' : item.state == 1 ? '待收货' : item.state == 2 ? '已收货' : '' }}
                                        </view>
                                        {{ item.user?.nickname }}提交的合同
                                    </view>
                                    <!-- 公司名称 -->
                                    <view class="company_name"><text>公司名称</text>{{ item.company_name }}</view>
                                    <!-- 合作业务 -->
                                    <view class="cooperative_business"><text>合作业务</text>{{ item.business }}</view>
                                    <!-- 提交时间 -->
                                    <view class="cooperative_business"><text>提交时间</text>{{ formatDatetime(item.createtime) }}</view>
                                </view>
                                <view class="examine">查看详情 > </view>
                            </view>
                            <view v-if="item.state !== '2'">
                                <view class="list_item_bottom" v-if="jurisdiction.includes(group_id)" >
                                    <view class="hint" v-if="item.state == '0'">*未填写邮寄信息,请填写</view>
                                    <view class="operating_button" @tap="fillOut(item.id, item.state)">{{ item.state == '0' ? '填写邮寄' : '确认收货' }}</view>
                                </view>
                            </view>
                        </view>
                    </view>
                    <!-- 正在加载组件 -->
                    <view>
                        <s-loadmore-gather :current_page="current_page" :last_page="last_page"
                            ref="loadmoreRef"></s-loadmore-gather>
                    </view>
                    <view class="placeholder">

                    </view>
                </view>
                <!-- 缺醒图 -->
                <view v-else style="width: 100%;height: 500rpx;background-color: #ffffff;border-radius: 20rpx;">
                    <u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png"></u-empty>
                    <view class="placeholde"></view>
                </view>

                <!-- <view class="null_box"></view> -->
            </scroll-view>
        </view>

    </s-layout>

    <!-- 底部新增邮寄按钮 -->
    <view>
        <s-button @netWork="newMail" :text="'新增邮寄'" />
    </view>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { baseUrl } from "@/sheep/config";
import sheep from '@/sheep';
import dayjs from 'dayjs';
import { formatDatetime } from '@/utils/fn.js';
const { safeAreaInsets } = uni.getSystemInfoSync();
onLoad(() => {
    const userStoreValue = uni.getStorageSync('user-store');
    const userStoreObject = JSON.parse(userStoreValue)
    group_id.value = userStoreObject.userInfo.group_id

    page.value = 1
    contractTraceabilityList.value = []
    contract_traceabilityIndexData()
})

onShow(() => {

})

const group_id = ref()
const jurisdiction = ref([4, 6])

// tabs
const state = ref({
    menulist: [
        { name: '全部', value: '' },
        { name: '待邮寄', value: '0' },
        { name: '待收货', value: '1' },
        { name: '已收货', value: '2' }
    ],
    currentTab: '0'
})

// 封装列表接口
const page = ref(1)
const contractTraceabilityList = ref([])
const key_word = ref('')
const state_data = ref('')
const current_page = ref();
const last_page = ref();
const contract_traceabilityIndexData = async () => {
    let params = {
        filter: JSON.stringify({
            business: key_word.value,
            state: state_data.value
        }),
        op: JSON.stringify({
            business: 'LIKE',
            state: '='
        }),
        page: page.value
    }
    const res = await sheep.$api.contract_traceability.contract_traceabilityIndexAPI(params)
    contractTraceabilityList.value = [...contractTraceabilityList.value, ...res?.data.rows]
    current_page.value = res.data.current_page;
    last_page.value = res.data.last_page;
}

// 加载更多
const loadmoreRef = ref()
// 分页
const PopupScrolltolower = () => {
    loadmoreRef.value.PopupScrolltolower() // 加载更多
    if (current_page.value < last_page.value) {
        page.value += 1;
    } else {
        return;
    }
    contract_traceabilityIndexData()
}

// 搜索合作业务
const searchKeyWord = (e) => {
    contractTraceabilityList.value = []
    page.value = 1
    key_word.value = e

    contract_traceabilityIndexData()
}

// 封装确认收货接口
const confirmReceipt = async (id) => {
    let params = {
        ids: id
    }
    const res = await sheep.$api.contract_traceability.contract_traceabilityConfirmAPI(params)
}

// 跳转详情
const skipDetails = (id) => {
    sheep.$router.go('/subpackage/staff/workbench/contract_traceability/contract_traceability_details', {
        ids: id
    })
}

// 填写邮寄
const fillOut = (id, state) => {
    if (state == '0') {
        sheep.$router.go('/subpackage/staff/workbench/contract_traceability/contract_traceability_edit', {
            ids: id
        })
    } else {
        confirmReceipt(id)
        page.value = 1
        contractTraceabilityList.value = []
        contract_traceabilityIndexData()
    }
}

// 新增邮寄
const newMail = () => {
    sheep.$router.go('/subpackage/staff/workbench/contract_traceability/contract_traceability_add')
}


// 切换tabs
const menulistclick = (e) => {
    state_data.value = e.value
    page.value = 1
    contractTraceabilityList.value = []
    contract_traceabilityIndexData()
}
// 页面下拉刷新
const freshing = ref(false)
const triggered = ref(false)
const isOpenRefresh = ref(true)  // 是否开启下拉
// 自定义下拉刷新控件被下拉
const onPulling = (e) => {
    if (e.detail.deltaY < 0) return  // 防止上滑页面也触发下拉
    triggered.value = true;
}
// 自定义下拉刷新被触发
const onRefresh = () => {
    if (freshing.value) return;
    freshing.value = true;
    setTimeout(() => {
        page.value = 1;
        contractTraceabilityList.value = []
        triggered.value = false;
        freshing.value = false;
        contract_traceabilityIndexData();
    }, 500);
}
// 自定义下拉刷新被复位
const onRestore = () => {
    triggered.value = 'restore'; // 需要重置
    // console.log("onRestore");
}
// 自定义下拉刷新被中止
const onAbort = () => {
    // console.log("onAbort");
}
</script>

<style scoped lang="scss">
@import '../compentns/publiclist.scss';

page {
    width: 100%;
    height: 100%;
}

#app {
    background-size: 100%;
    width: 100%;
    min-height: 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

// tabs样式修正
.menu {
    background-color: $uni-bg-color;
    margin-bottom: 20rpx;
    margin-top: 240rpx;
}

:deep(.u-tabs__wrapper__nav__item) {
    width: calc(25% - 44rpx);
}

:deep(.u-tabs__wrapper__nav__line) {
    width: 30rpx !important;
    height: 8rpx !important;
    border-radius: 4rpx !important;
    background: linear-gradient(90deg, rgba(0, 56, 247, 1) 0%, rgba(77, 139, 255, 1) 100%) !important;
}

:deep(.uni-date__x-input) {
    width: 70% !important;
    padding: 0 !important;
    color: $uni-color-primary;
}

:deep(.uni-date-x--border) {
    border: none;
    width: 100%;
    padding: 0;
    color: $uni-color-primary;
}

:deep(.uni-date-x) {
    background-color: rgba(0, 0, 0, 0);
    padding: 0;
    color: $uni-color-primary !important;
}

:deep(.uni-date-editor) {
    width: 100%;
    color: $uni-color-primary;
}

.uni-date {
    width: 100%;
    color: $uni-color-primary;
}

.area {
    width: calc(100% - 40rpx);
    margin: 0 20rpx;

    // 项目
    .project {
        margin-top: 20rpx;
        background-size: 100%;
        width: 100%;
        height: 182rpx;
        background-repeat: no-repeat;
        color: $uni-text-color;
        margin-bottom: 20rpx;

        .chop {
            width: calc(100% - 40rpx);
            height: 56rpx;
            font-size: 40rpx;
            font-weight: 700;
            padding: 40rpx 0 0 40rpx;
            display: flex;
            align-items: center;
            /* 垂直居中 */

            // 项目标题超出隐藏
            .spill {
                margin-right: 10rpx;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            image {
                width: 26rpx;
                height: 26rpx;
            }
        }

        // 标语
        .slogan {
            font-family: PingFangSC;
            color: $uni-text-color;
            font-weight: $uni-font-weight;
           font-size:$uni-font-size-26;
            font-style: normal;
            text-decoration: none;
            margin-left: 40rpx;
            margin-top: 12rpx;
        }
    }
}

// 滚动容器
.comprehensive {
    border-radius: 16rpx;
    width: calc(100% - 40rpx);
    background-color: rgba(0, 0, 0, 0);
    margin: 0 20rpx;
    height: calc(60vh - 108rpx);
    margin-top: 20rpx;
}

.border {
    border-bottom: 2rpx solid #EFEFEF;
}

// 列表项
.list_item {
    // height: 354rpx;
    padding-bottom: 18rpx;
    border-radius: 8px;
    background-color: #FFFFFF;
    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.05);
    margin-bottom: 20rpx;
    justify-content: space-between;

    .list_item_left {
        display: flex;
        // border-bottom: 2rpx solid #EFEFEF;

        // 左 图标
        .icon {
            width: 96rpx;
            height: 96rpx;
            margin: 30rpx 30rpx 50rpx 0rpx;

            image {
                width: 100%;
                height: 100%;
            }
        }

        // 右 信息
        .message_box {

            // 提交人
            .submitter {
                display: flex;
                font-family: PingFangSC;
                color: $uni-text-color;
                font-weight: $uni-font-weight;
                font-size: 30rpx;
                font-style: normal;
                text-decoration: none;
                margin-top: 30rpx;
            }

            // 公司名称
            .company_name {
                width: 430rpx;
                font-family: PingFangSC;
                color: #666666;
                font-weight: 500;
                font-size:$uni-font-size-26;
                font-style: normal;
                text-decoration: none;
                margin-bottom: 20rpx;
                margin-top: 18rpx;
                white-space: nowrap;
                /* 防止文本换行 */
                overflow: hidden;
                /* 文本超出部分隐藏 */
                text-overflow: ellipsis;

                /* 使用省略号展示溢出的文本 */
                text {
                    font-family: PingFangSC;
                    color: #666666;
                    font-weight: $uni-font-weight;
                   font-size:$uni-font-size-26;
                    font-style: normal;
                    text-decoration: none;
                    margin-right: 20rpx;
                }
            }

            // 合作业务
            .cooperative_business {
                font-family: PingFangSC;
                color: #666666;
                font-weight: 500;
               font-size:$uni-font-size-26;
                font-style: normal;
                text-decoration: none;
                margin-bottom: 20rpx;
                margin-top: 18rpx;
                white-space: nowrap;
                /* 防止文本换行 */
                overflow: hidden;
                /* 文本超出部分隐藏 */
                text-overflow: ellipsis;

                /* 使用省略号展示溢出的文本 */
                text {
                    font-family: PingFangSC;
                    color: #666666;
                    font-weight: $uni-font-weight;
                   font-size:$uni-font-size-26;
                    font-style: normal;
                    text-decoration: none;
                    margin-right: 20rpx;
                }
            }

            // 提交时间
        }
    }

    .list_item_bottom {
        margin-top: 20rpx;
        height: 60rpx;
        display: flex;
        align-items: center;

        // justify-content: space-between;
        .hint {
            font-family: PingFangSC;
            color: #FF0000;
            font-weight: 700;
            font-size: 22rpx;
            font-style: normal;
            text-decoration: none;
            margin-left: 20rpx;
        }

        .operating_button {
            margin-left: auto;
            width: 180rpx;
            height: 60rpx;
            border-radius: 32rpx;
            background: linear-gradient(90deg, rgba(0, 56, 247, 1) 0%, rgba(77, 139, 255, 1) 100%);
            text-align: center;
            line-height: 60rpx;
            font-family: PingFangSC;
            color: #FFFFFF;
            font-weight: 500;
            font-size: $uni-font-size-base;
            font-style: normal;
            text-decoration: none;
            margin-right: 20rpx;
        }
    }

    // 详情
    .examine {
        font-family: PingFangSC;
        color: $uni-color-primary;
        font-weight: 700;
        font-size: 22rpx;
        font-style: normal;
        text-decoration: none;
        width: 125rpx;
        display: flex;
        align-items: center;
    }
}

// 占位
.placeholde {
    width: 100%;
    height: 50rpx;
    text-align: center;
    line-height: 50rpx;
    font-weight: $uni-font-weight;
    background-color: #ffffff;
    margin-bottom: 10rpx;
    border-bottom-left-radius: 16rpx;
    border-bottom-right-radius: 16rpx;
}

// 空盒子
.null_box {
    height: 72rpx;
}

#app {
    background-size: 100%;
    width: 100%;
    min-height: 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    }
    :deep(.u-icon__icon) {
    background: #ffffff;
    width: 64rpx;
    height: 64rpx;
    justify-content: center;
    border-radius: 50%;
    }

    .placeholder {
        height: 20rpx;
    }
</style>